<script setup lang="ts">
  import { Field, Form } from 'vee-validate';
  import { useLocale } from '@/locales/useLocale';
  import DynamicCheckbox from '@/components/common/dynamicForm/DynamicCheckbox.vue';
  import DynamicSelect from '@/components/common/dynamicForm/DynamicSelect.vue';
  import DynamicRadio from '@/components/common/dynamicForm/DynamicRadio.vue';
  const schema = {
    drink: (value: any) => {
      if (value) {
        return true;
      }
      return 'You must choose a drink';
    },
    username: 'required',
    confirmedUsername: 'required|confirmed:@username',
    userAgreement: 'userAgreement',
    select: 'required',
    captcha: 'required',
  };
  const initValues = {
    drink: '',
    username: '',
    confirmedUsername: '',
    userAgreement: false,
    select: '',
    captcha: '',
  };
  function onSubmit(values: any) {
    console.log(JSON.stringify(values, null, 2));
  }

  const onImgClick = () => {
    console.log('this');
  };

  const { t } = useLocale();

  const options = [
    {
      value: 'Option1',
      label: 'Option1',
    },
    {
      value: 'Option2',
      label: 'Option2',
    },
    {
      value: 'Option3',
      label: 'Option3',
    },
    {
      value: 'Option4',
      label: 'Option4',
    },
    {
      value: 'Option5',
      label: 'Option5',
    },
  ];

  const option2 = [
    {
      value: '',
      label: 'None',
    },
    {
      value: 'Tea',
      label: 'Tea',
    },
    {
      value: 'Coffee',
      label: 'Coffee',
    },
  ];

  const onSendSms = () => {
    console.log('send sms');
  };
</script>

<template>
  <Form
    as="ElForm"
    :validation-schema="schema"
    @submit="onSubmit"
    :initialValues="initValues"
    label-width="120px"
    label-position="right"
  >
    <!-- You can use the field component to wrap a 'el-form-item' component -->
    <!-- Do this if you have only one or a few places that need validation -->
    <component :is="'DynamicInput'" name="username" placeholder="username" label="username" />
    <component
      :is="'DynamicInput'"
      name="confirmedUsername"
      placeholder="confirmedUsername"
      label="confirmed"
      :showPassword="true"
      type="password"
    />
    <component :is="'DynamicRadio'" name="drink" :options="option2" />
    <component :is="'DynamicCheckbox'" name="userAgreement">用户协议</component>
    <component :is="'DynamicSelect'" name="select" :options="options" />
    <component
      :is="'DynamicCaptcha'"
      name="captcha"
      placeholder="captcha"
      @img-click="onImgClick"
      label="captcha"
      :captchaData="{}"
    />
    <component
      :is="'DynamicSmsCode'"
      name="smsCode"
      placeholder="smsCode"
      @send-sms="onSendSms"
      label="smsCode"
    />
    <el-button native-type="submit" type="primary" class="w-full">submit</el-button>
  </Form>
</template>

<style lang="scss"></style>
